<template>
	<view id="scaleContainer">
		<!-- 全国概览 -->
	    <view id="charts">
	        <view class="up-tips up-gnbl">全国信息</view>
	        <view class="timeNum">
	            <view class="d">数据更新至：{{updateTime}}</view>
	        </view>
	        <view class="recentNumber">
	            <view class="icbar confirm">
	                <view class="number">{{confirm}}</view>
	                <view class="text">全国确诊</view>
				</view>
	            <view class="icbar suspect">
					<view class="number">{{suspect}}</view>
					<view class="text">疑似病例</view>
				</view>
				<view class="icbar cure">
					<view class="number">{{heal}}</view>
					<view class="text">治愈人数</view>
				</view>
				<view class="icbar dead">
					<view class="number">{{dead}}</view>
					<view class="text">死亡人数</view>
				</view>
			</view>
			<view class="recentNumber">
				<view class="icbar newconfirm">
					<view class="number">{{addconfirm}}</view>
					<view class="text">新增确诊</view>
				</view>
				<view class="icbar newsuspect">
					<view class="number">{{addsuspect}}</view>
					<view class="text">新增疑似</view>
				</view>
				<view class="icbar newcure">
					<view class="number">{{addheal}}</view>
					<view class="text">新增治愈</view>
				</view>
				<view class="icbar newdead">
					<view class="number">{{adddead}}</view>
					<view class="text">新增死亡</view>
				</view>
			</view>	
		</view>
		<!-- 省份信息 -->
		<view class="province">
			<view class="up-gnbl up-tips">
				全国详情病例
			</view>
			<view class="p_information">
				<!-- 表头 -->
				<view class="p-table">
					<view class="p-area p-box">地区</view>
					<view class="p-box">现有确诊</view>
					<view class="p-box">确诊</view>
					<view class="p-box">死亡</view>
					<view class="p-box">治愈</view>
				</view>
				<!-- 详情 -->
				<view class="area-information" v-for="item in arealist">
					<view class="p-box">
						<view class="p-area">{{item.provinceShortName}}</view>
					</view>
					<view class="p-box">
						<view>{{item.currentConfirmedCount}}</view>
					</view>
					<view class="p-box">
						<view>{{item.confirmedCount}}</view>
					</view>
					<view class="p-box">
						<view>{{item.deadCount}}</view>
					</view>
					<view class="p-box">
						<view>{{item.curedCount}}</view>
					</view>	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				arealist:[],
				updateTime:"DD",
				confirm:0,
				suspect:0,
				dead:0,
				heal:0,
				addconfirm:0,
				addsuspect:0,
				adddead:0,
				addheal:0,
				area:"地区",
				area_confirm:0,
				area_t_confirm:0,
				area_dead:0,
				area_heal:0
			}
		},
		created(){
			const Promise1 = new Promise((resolve, reject) => {
			  uni.request({
			    url:'https://lab.isaaclin.cn/nCoV/api/area',
				success: (res) => {
				  this.result = res.data.results;
				  this.ChinaInformation = this.result.filter(item=>item.countryName=="中国"&&item.provinceShortName=="中国");
			      this.areaofChina = this.result.filter(item=>item.countryName=="中国"&&item.provinceShortName!="中国");
			      this.arealist = this.areaofChina;
				  console.log(this.ChinaInformation);
				  this.updateTime = new Date(this.ChinaInformation[0].updateTime).toISOString();
				  this.confirm = this.ChinaInformation[0].confirmedCount;
				  this.suspect = this.ChinaInformation[0].suspectedCount;
				  this.heal = this.ChinaInformation[0].curedCount;
				  this.dead = this.ChinaInformation[0].deadCount;
				  resolve();
			    },
			    fail: (err) => {
			      reject(err);
			    },
			  });
			}).then(()=>{
			    this.isShow = true;
			}).catch((err)=>{
			  console.log(err)
			});
			
			const Promise2 = new Promise((resolve, reject) => {
			  uni.request({
			    url: `https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare`,
			    success: (res) => {
				  this.result2 = res.data.data.chinaDayList.splice(50);				  
				  this.len = this.result2.length;
				  this.addresult = res.data.data.chinaDayAddList.splice(50);
  				  this.addlist = this.addresult;
  				  // console.log(this.addlist);
  				  this.addconfirm = this.addlist[this.len-1].confirm;
  				  this.addsuspect = this.addlist[this.len-1].suspect;
  				  this.adddead = this.addlist[this.len-1].dead;
  				  this.addheal = this.addlist[this.len-1].heal;
			      resolve();
			    },
			    fail: (err) => {
			      reject(err);
			    },
			  });
			}).then(()=>{
			    this.isShow = true;
			}).catch((err)=>{
			  console.log(err)
			})
		}
	}
</script>

<style>
	.d{
		color:#999;
		margin:20px 30px;
		font-size: 0.9rem;
		font-family: Arial;
	}
	.recentNumber, .p-table{
		width: 90%;
		margin:5% 5%;
		display: flex;
		text-align: center;
		justify-content: space-around;
		
	}
	.icbar{
		color: #d81d1b;
		font-weight: bolder;
	}
	.newconfirm{
		color:#ff6a57;
	}
	.icbar.suspect{
		color: #ec9217;
		
	}
	.newsuspect{
		color: #f7ab1a;
	}
	.icbar.cure{
		color: #178b50;
	}
	.newcure{
		color:#10aeb5
	}
	.icbar.dead{
		color: #4d5054;
	}
	.newdead{
		color: #66666c;
	}
	.p-table{
		font-family: Arial;
		font-weight: 300;
	}
	.p-area{
		color: #005DFF;
	}
	.p-box{
		width: 67px;
	}
	.area-information{
		width: 90%;
		margin:5% 5%;
		display: flex;
		text-align: center;
		justify-content: space-between;
	}
</style>
